<template>
  <div class="yue">
    <div @click="router.back()">
        ◀&emsp;余额充值
    </div>
    <div class="money-box">
        <div v-for="(item,index) in gold" :key="item" @click="active=index" :class="active===index?'active':''">{{item.toFixed(2)}}元</div>
    </div>
    <div>
        <h3>请选择充值方式</h3>
        <van-radio-group v-model="checked">
  <van-cell-group inset>
    <van-cell title="支付宝" clickable @click="checked = '1'">
      <template #right-icon>
        <van-radio name="1" />
      </template>
    </van-cell>
    <van-cell title="微信" clickable @click="checked = '2'">
      <template #right-icon>
        <van-radio name="2" />
      </template>
    </van-cell>
    <van-cell title="银联" clickable @click="checked = '3'">
      <template #right-icon>
        <van-radio name="3" />
      </template>
    </van-cell>
  </van-cell-group>
</van-radio-group>
    </div>
  </div>
    <div class="but">
        <van-button type="primary" round @click="req">确认充值</van-button>
    </div>
</template>

<script setup>
import {ref,reactive,toRefs} from 'vue'
import {addUserRecharge} from '@/model/until'
import {useRouter} from 'vue-router'
import userFlag from '@/hooks/unti'
import userFlags from '@/hooks/un'
userFlag()
const router = useRouter()
let checked = ref(0)
let active = ref(0)
let money = reactive({
    gold:[30,50,100]
})
let req = ()=>{
    addUserRecharge({rechargeMode:checked.value,rechargeAmount:money.gold[active.value]},{Authorization:window.localStorage.getItem('token')}).then(res=>{
       router.push('/cards')
    })
}
const {gold} = toRefs(money)
userFlags()
</script>

<style lang="scss" scoped>
.yue{
    padding: 10px;
    height: 80vh;
    background: rgb(238, 241, 238);
}
.money-box{
    margin-top: 10px;
    display: flex;
    text-align: center;
    div{
        flex: 1;
        line-height: 60px;
        background: #fff;
        margin: 10px;
        border-radius: 10px;
    }
}
h3{
    margin-top: 10px;
    margin-bottom: 20px;
}
.but{
    padding: 10px;
    background: rgb(238, 241, 238);
    button{
        width: 100%;
    }
}
.active{
    background: skyblue!important;;
}
</style>